{include file="common/head"}
<style>
    form {
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
    }

    .pay-type {
        border: 2px dotted #777;
        padding: 2px;
        display: inline-block;
        border-radius: 2px;
    }

    .order-list {
        background-color: #fff;
        padding: 10px;
    }

    .order-item:not(:last-child) {
        border: 2px dotted #777;
        margin: 10px 0;
        padding: 10px;
    }

    .item {
        margin: 10px 0;
        border-radius: 10px;
        box-shadow: 0 3px 8px #eee;
    }
</style>
<div class="layout">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>积分商城</cite></a>
    </span>
    <form action="/index/pay/epayApi" method="post" class="layui-form item">
        <input type="text" name="name" value="score" hidden>
        <p class="layui-font-blue layui-font-16 layui-margin-2">充值积分</p>
        <!-- <input type="text" name="sign" value=""> -->
        <select name="score" id="">
            <option value="0" disabled>请选择要充值的积分数额</optFion>
            <option value="1">积分 * 100 --- 1元</optFion>
            <option value="2">积分 * 500 --- 3元</option>
            <option value="3">积分 * 1000 --- 5元</option>
        </select>
        <p class="layui-font-black layui-font-12 layui-margin-2">支付方式</p>
        <div class="pay-type">
            <input type="radio" name="type" value="alipay" title="支付宝" checked>
            <input type="radio" name="type" value="wxpay" title="微信">
            <input type="radio" name="type" value="qqpay" title="QQ">
        </div>
        <div class="btn" style="text-align: right;">
            <button type="submit" class="layui-btn-sm layui-btn layui-bg-blue">立即支付</button>
        </div>
    </form>
    <!-- 订单查询 -->
    <!-- <form class="layui-form layui-form-pane" lay-filter="query">
        <p class="layui-font-blue layui-font-16 layui-margin-2">订单查询</p>
        <div class="order-query">
            <input type="text" class="layui-input" placeholder="请输入订单号" name="order">
            <div class="btn layui-padding-3" style="text-align: right;">
                <button type="button" class="layui-btn-sm layui-btn layui-bg-purple" lay-submit
                    lay-filter="query">查询</button>
            </div>
            <p class="layui-font-black layui-font-14 layui-margin-2">查询结果</p>
            <div class="layui-panel">
                <div style="padding: 32px;" id="result">

                </div>
            </div>
        </div>
    </form> -->
    <div class="fake item">
        <form class="layui-form" action="">
            <p class="layui-font-blue layui-font-16 layui-margin-2">卡密兑换</p>
            <div class="layui-card">
                <div class="layui-card-header">使用须知</div>
                <div class="layui-card-body">
                    Ps：每张卡密只能使用一次哦！<br>
                    确保输入的是正确卡密
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">卡密 * </label>
                <div class="layui-input-block">
                    <input type="text" name="fake" lay-verify="required" placeholder="请输入卡密" autocomplete="off"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="text-align: right;">
                <button type="submit" class="layui-btn layui-btn-sm layui-bg-blue" lay-submit lay-filter="submit"
                   >立即提交</button>
            </div>
        </form>
    </div>
    <div class="order-list item">
        <p class="layui-font-blue layui-font-16 layui-margin-2">订单列表</p>
        {if $orderList}
        {volist name="orderList" id="order"}
        <p class="order-item layui-font-12">
            商品名称：{$order.good_name}<br>
            支付金额：{$order.money}<br>
            订单状态：<span class="layui-badge layui-bg-{$order.status == 1 ? 'success' : 'orange'}">{$order.status == 1 ?
                '成功' : '未支付'}</span><br>
            订单号：{$order.out_trade_no}<br>
            购买时间：{$order.create_time}<br>
        </p>
        {/volist}
        {else /}
        <span class="layui-font-14">什么也没有~</span>
        {/if}
    </div>

</div>
</div>
{include file="common/bottom"}
<script>
    layui.use(function () {
        var form = layui.form;
        $ = layui.$
        var layer = layui.layer;
        form.on('submit(submit)', (data) => {
            let field = data.field
            $.post('/index/account/useFake', field, (res) => {
                if (res.code == 200) {
                    layer.msg(res.message)
                } else {
                    layer.msg(res.message)
                }
            })
            return false
        })
        // form.on('submit(query)', function (data) {
        //     var field = data.field;
        //     $('#result').empty()
        //     $.post('/index/pay/query', field, (res) => {
        //         if (res.data.code == 1) {
        //             data = res.data
        //             html = `商品：${data.name}<br>金额：${data.money}<br>添加时间：${data.addtime}<br>订单号：${data.trade_no}<br>支付方式：${data.type}`
        //             $('#result').append(html)
        //         } else {
        //             $('#result').append('订单号不存在')
        //         }
        //     })
        //     return false; // 阻止默认 form 跳转
        // });
    });
</script>